<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="(news, index) in newsList" :key="index">
        <!-- props 第一种写法  将路由收到的所有【params参数】作为props传给路由组件-->
        <!-- <RouterLink :to="{
          name: 'xiangqing',   //params传参 不能用组件路径传参，只能用组件的name属性传参
          params: {
            id: news.id,   //必传
            title: news.title,  //可传可不传
            content: news.content,  //必传
          }
        }">{{ news.title }}</RouterLink> -->
         <!-- props 第二种写法   函数写法，可以自己决定将什么作为props给路由组件  params和query传参都支持-->
        <RouterLink :to="{
          name: 'xiangqing',
          query: {
            id: news.id,   //必传
            title: news.title,  //可传可不传
            content: news.content,  //必传
          }
        }">{{ news.title }}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue'
import { RouterView, RouterLink } from "vue-router";
let newsList = reactive([
  {
    id: 'YeNanManJian001',
    title: '如何一夜暴富',
    content: '上黑马学IT，月薪过万',
  },
  {
    id: 'YeNanManJian002',
    title: '震惊，万万没想到',
    content: '明天是周一',
  },
  {
    id: 'YeNanManJian003',
    title: '很好的抗癌实物',
    content: '西蓝花',
  },
  {
    id: 'YeNanManJian004',
    title: '好消息！好消息！',
    content: '快过年了',
  },
])
</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.news ul {
  margin-top: 30px;
  list-style: none;
  padding-left: 10px;
}

.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}

.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
